import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import { AppOutline, AppstoreOutline, UnorderedListOutline, UserOutline ,TruckOutline} from 'antd-mobile-icons'
import "../../styles/index/mytabbar.css"
import { withRouter } from "react-router-dom"

class MyTabbar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tabs: [
                {
                    key: '/index/home',//路由地址
                    title: '首页',//按钮文字
                    icon: <AppOutline />,//按钮坐标
                },
                {
                    key: '/index/classification',//路由地址
                    title: '分类',//按钮文字
                    icon: <UnorderedListOutline />,//按钮坐标
                },
                {
                    key: '/index/allgoods',//路由地址
                    title: '全部商品',//按钮文字
                    icon: <AppstoreOutline />,//按钮坐标
                },
                {
                    key: '/index/cart',//路由地址
                    title: '购物车',//按钮文字
                    icon: <TruckOutline />,//按钮坐标
                },
                {
                    key: '/index/mine',//路由地址
                    title: '我的',//按钮文字
                    icon: <UserOutline />,//按钮坐标
                },
            ],
            activeKey:'/index/home'
        }

    }
    mychange(key) {
        // 由于全部商品页面在还未点击分类跳转时,没有三级分类的id,那么就请求不到渲染列表,就会报错,我们在首页跳转的时候向全部商品页一个固定的三级分类id这样就确保可以正常发请求,就不会报错.
        this.props.history.push({ pathname: key, state: { id: 282657 } })
        this.setState({activeKey:key})
    }
    render() {
        return (
            <div className='index-mytabbar'>
                <TabBar onChange={(key) => { this.mychange(key) }} activeKey={this.state.activeKey}>
                    {
                        this.state.tabs.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}
//withRouter是react-router-dom实现的一个高阶组件,专门用来给没有location,history,match这三个路由对象的组件 添加这三个路由
export default withRouter(MyTabbar);